<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';">
  <link rel="icon" href="./favicon.ico" />
  <title>Electron多功能工具</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      color: #333;
    }
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .title-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      background-color: #2c3e50;
      color: white;
      padding: 0 10px;
      -webkit-app-region: drag;
    }
    .title-bar-left {
      display: flex;
      align-items: center;
    }
    .app-title {
      margin-left: 10px;
      font-weight: bold;
    }
    .title-bar-right {
      display: flex;
    }
    .window-control {
      width: 14px;
      height: 14px;
      margin-left: 10px;
      border-radius: 50%;
      border: none;
      -webkit-app-region: no-drag;
      cursor: pointer;
    }
    .minimize { background-color: #ffbd2e; }
    .maximize { background-color: #28c941; }
    .close { background-color: #ff5f57; }
    
    .main-content {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .sidebar {
      width: 200px;
      background-color: #34495e;
      color: white;
      padding: 20px 0;
    }
    .sidebar-item {
      padding: 12px 20px;
      cursor: pointer;
      transition: background-color 0.3s;
      display: flex;
      align-items: center;
    }
    .sidebar-item:hover {
      background-color: #2c3e50;
    }
    .sidebar-item.active {
      background-color: #2980b9;
    }
    .sidebar-item-icon {
      margin-right: 10px;
      font-size: 18px;
    }
    
    .content-area {
      flex: 1;
      padding: 20px;
      overflow: auto;
    }
    .welcome-section {
      text-align: center;
      margin-top: 40px;
    }
    .welcome-section h1 {
      font-size: 28px;
      margin-bottom: 10px;
      color: #2c3e50;
    }
    .welcome-section p {
      font-size: 16px;
      color: #7f8c8d;
      margin-bottom: 40px;
    }
    .feature-cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 30px;
    }
    .feature-card {
      width: 200px;
      height: 180px;
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
      text-align: center;
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    }
    .card-icon {
      font-size: 36px;
      margin-bottom: 15px;
    }
    .feature-card h3 {
      font-size: 18px;
      margin-bottom: 8px;
      color: #2c3e50;
    }
    .feature-card p {
      font-size: 14px;
      color: #7f8c8d;
    }
    
    .system-info {
      margin-top: 40px;
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }
    .system-info h3 {
      margin-top: 0;
      margin-bottom: 15px;
      color: #2c3e50;
    }
    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 10px;
    }
    .info-item {
      display: flex;
      align-items: center;
    }
    .info-label {
      font-weight: bold;
      margin-right: 10px;
      color: #7f8c8d;
    }
    .info-value {
      color: #2c3e50;
    }
    
    #loading {
      display: none; /* 默认隐藏加载提示 */
    }
  </style>
</head>
<body>
  <div id="loading">
    <h2>加载中...</h2>
    <div id="error-container"></div>
  </div>
  
  <div class="container">
    <!-- 自定义标题栏 -->
    <div class="title-bar">
      <div class="title-bar-left">
        <div class="app-logo">🔧</div>
        <div class="app-title">Electron多功能工具</div>
      </div>
      <div class="title-bar-right">
        <button class="window-control minimize" id="btn-minimize"></button>
        <button class="window-control maximize" id="btn-maximize"></button>
        <button class="window-control close" id="btn-close"></button>
      </div>
    </div>
    
    <!-- 主内容 -->
    <div class="main-content">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <div class="sidebar-item active" data-page="home">
          <span class="sidebar-item-icon">🏠</span>
          <span>首页</span>
        </div>
        <div class="sidebar-item" data-page="file">
          <span class="sidebar-item-icon">📁</span>
          <span>文件</span>
        </div>
        <div class="sidebar-item" data-page="map">
          <span class="sidebar-item-icon">🗺️</span>
          <span>地图</span>
        </div>
        <div class="sidebar-item" data-page="settings">
          <span class="sidebar-item-icon">⚙️</span>
          <span>设置</span>
        </div>
        <div class="sidebar-item" data-page="about">
          <span class="sidebar-item-icon">ℹ️</span>
          <span>关于</span>
        </div>
      </div>
      
      <!-- 内容区 -->
      <div class="content-area">
        <div id="home-page" class="page-content">
          <div class="welcome-section">
            <h1>欢迎使用 Electron多功能工具</h1>
            <p class="subtitle">一个现代化的跨平台工具集合</p>
            
            <div class="feature-cards">
              <div class="feature-card" data-page="file">
                <div class="card-icon">📁</div>
                <h3>文件管理</h3>
                <p>管理、编辑和分析您的文件</p>
              </div>
              
              <div class="feature-card" data-page="map">
                <div class="card-icon">🗺️</div>
                <h3>地图功能</h3>
                <p>查看地图和位置信息</p>
              </div>
              
              <div class="feature-card" data-page="settings">
                <div class="card-icon">⚙️</div>
                <h3>应用设置</h3>
                <p>自定义应用程序的行为和外观</p>
              </div>
              
              <div class="feature-card" data-page="about">
                <div class="card-icon">ℹ️</div>
                <h3>关于软件</h3>
                <p>了解软件版本和更新信息</p>
              </div>
            </div>
          </div>
          
          <div class="system-info">
            <h3>系统信息</h3>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">操作系统:</span>
                <span class="info-value" id="os-platform">Windows</span>
              </div>
              <div class="info-item">
                <span class="info-label">Electron版本:</span>
                <span class="info-value" id="electron-version">-</span>
              </div>
              <div class="info-item">
                <span class="info-label">Chrome版本:</span>
                <span class="info-value" id="chrome-version">-</span>
              </div>
              <div class="info-item">
                <span class="info-label">Node版本:</span>
                <span class="info-value" id="node-version">-</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // 窗口控制按钮
    document.getElementById('btn-minimize').addEventListener('click', () => {
      if (window.electronAPI) {
        window.electronAPI.minimizeWindow();
      }
    });
    
    document.getElementById('btn-maximize').addEventListener('click', () => {
      if (window.electronAPI) {
        window.electronAPI.maximizeWindow();
      }
    });
    
    document.getElementById('btn-close').addEventListener('click', () => {
      if (window.electronAPI) {
        window.electronAPI.closeWindow();
      }
    });
    
    // 侧边栏切换
    document.querySelectorAll('.sidebar-item').forEach(item => {
      item.addEventListener('click', () => {
        // 移除所有active类
        document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
        // 添加当前项的active类
        item.classList.add('active');
        
        // 这里是示意，实际应显示对应页面内容
        console.log('切换到页面:', item.dataset.page);
      });
    });
    
    // 特性卡片点击
    document.querySelectorAll('.feature-card').forEach(card => {
      card.addEventListener('click', () => {
        const page = card.dataset.page;
        // 激活对应侧边栏
        document.querySelectorAll('.sidebar-item').forEach(i => {
          i.classList.toggle('active', i.dataset.page === page);
        });
        
        console.log('切换到特性:', page);
      });
    });
    
    // 设置系统信息
    if (window.electronAPI) {
      document.getElementById('os-platform').textContent = window.electronAPI.platform || 'Unknown';
    }
    
    // 监听主进程消息
    if (window.electronAPI && window.electronAPI.onMessage) {
      window.electronAPI.onMessage(message => {
        console.log('收到主进程消息:', message);
      });
    }
    
    // 预加载完成后设置版本信息
    window.addEventListener('DOMContentLoaded', () => {
      try {
        // 使用electronAPI.versions获取版本信息
        if (window.electronAPI && window.electronAPI.versions) {
          const versions = window.electronAPI.versions;
          
          // 设置版本信息
          document.getElementById('chrome-version').textContent = versions.chrome || '-';
          document.getElementById('node-version').textContent = versions.node || '-';
          document.getElementById('electron-version').textContent = versions.electron || '-';
        }
      } catch (err) {
        console.error('获取版本信息失败:', err);
      }
    });
  </script>
</body>
</html>
